<template>
    <div class="opinion-box">
      <div class="opinion-box-header">
        <h2>意见反馈</h2>
      </div>
      <div class="opinion-box-form">
        <Form ref="opinionForm" :model="formItem" :label-width="80" :rules="ruleValidate">
            <FormItem label="标题" prop="title">
                <Input v-model="formItem.title" placeholder="意见标题，建议简明输入"></Input>
            </FormItem>
            <FormItem label="建议/反馈" prop="content">
                <Input v-model="formItem.content" type="textarea" :autosize="{minRows: 10,maxRows: 10}" placeholder="意见反馈或BUG反馈"></Input>
            </FormItem>
            <FormItem label="联系方式" prop="contactWay">
                <Input v-model="formItem.contactWay" placeholder="电话/邮箱/QQ"></Input>
            </FormItem>
            <FormItem>
                遇到问题？也可加入我们的QQ群反馈问题：111111111
            </FormItem>
            <FormItem>
                <Button type="primary" @click = "ok('opinionForm')" :loading="loading">{{loading ? '提交中...' :'提交'}}</Button>
                <Button type="ghost" style="margin-left: 8px" @click="handleReset('opinionForm')">清空</Button>
            </FormItem>
        </Form>
      </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                formItem: {
                    title: '',
                    content: '',
                    contactWay: ''
                },
                loading: false,
                ruleValidate: {
                  title: [
                        { required: true, message: '意见标题必须输入，用于技术人员快速定位问题', trigger: 'blur' },
                        { max: 100, message: '标题长度最长为100个字符', trigger: 'blur' }
                    ],
                  content: [
                        { required: true, message: '意见内容必须输入', trigger: 'blur' },
                        { max: 2000, message: '标题长度最长为2000个字符', trigger: 'blur' }
                    ],
                }
            }
        },
        methods: {
          ok (name) {
            this.$Modal.confirm({
              title: '操作提示',
              content: '确定提交您的反馈信息吗？',
              onOk: () => {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.loading = true
                        this.$store.dispatch('opinion/save', { ...this.formItem}).then((response) => {
                          if (response) {
                            const { httpCode, msg } = response
                            if (httpCode == 200) {
                              this.$Message.success('反馈成功');
                              this.$refs[name].resetFields();
                            } else {
                              this.$Message.error(msg || '反馈失败')
                            }
                          }
                          this.loading = false
                        })
                    } else {
                      this.$Message.error('表单验证失败，请根据提示信息修正');
                    }
                })
              },
              onCancel: () => {
                this.loading = false
              }
            });
          },
          handleReset (name) {
              this.$refs[name].resetFields();
          }
        }
    }
</script>

<style lang="less" scoped>
.opinion-box {
  margin:10px auto;
  width: 800px;
  background: #fff;
  border-radius: 5px;
  padding:20px;
  &-header {
    height: 40px;
    line-height: 40px;
    border-bottom:1px solid #f0f0f0;
  }
  &-form {
    margin-top:20px;
  }
}
</style>

